<template>
  <div class="loginbox">
    <div class="login">
      <div class="content">
        <div class="logo">
        </div>
        <div class="box">
          <compon-test>
            <h2>钩子内容</h2>
            <h3 slot="ab">
              钩子2
            </h3>
          </compon-test>
        </div>
      </div>
    </div>
    <div class="background">
      <span v-for="a in (new Array(10))" :key="a">{{a}}</span>
    </div>
  </div>
</template>


<script>
  import {captcha} from '@/service'
  import {mapState, mapMutations, mapActions} from 'vuex'

  export default {
    name: "Login",
    data() {
      return {
        params: {
          username: '',
          password: '',
          captcha: '111111'
        },
        disabled: true
      }
    },

    methods: {

      ...mapActions('admin',['GET_CAPTCHA','LOGIN']),
      /**
       * 点击登陆执行的事件
       * @param {Object} params 即将请求AJAX的对象
       * @author 张晓东
       * @date 2019-07-12
       */
      async bindLogin(params) {
        let self = this

        const loading = this.$loading({
          text:"加载中..."
        })

        await this.LOGIN({
          params,
          success(){
            loading.close()
            self.$router.push('/')
          },
          fail(){
            loading.close()
          }
        })
      },


      /**
       * 切换验证吗
       * @param {Object} params 即将请求AJAX的对象
       * @author 张晓东
       * @date 2019-07-12
       */
      bindCaptch(){
        // this.GET_CAPTCHA()
      }
    },
    computed: {
      ...mapState('admin', ['captcha'])
    },
    async created() {
      localStorage.removeItem('token')
      // await this.GET_CAPTCHA()
    },

    watch: {
      params: {
        /**
         * 深度监控函数，监控是否已经填写完信息
         * @param {*} oldVal 旧值
         * @param {*} newVal 新值
         * @author 张晓东
         * @date 2019-07-12
         */
        handler(oldVal, newVal) {
          let self = this
          if (newVal.username && newVal.password) {
            self.disabled = false
          } else {
            self.disabled = true
          }
        },
        deep: true
      }
    }
  }
</script>

<style>
  .el-input-group__append, .el-input-group__prepend{
    border:none;
    padding: 0 0;
  }
</style>

<style scoped lang="less">
  @import "./index.less";
</style>
